<template>
  <div class="sales">
    <el-card>
      <CommonCard title="今日交易用户数" value="182,425">
        <!-- 插槽,将预先写好的组件结构传入插槽中,如果写template,那么必须要写default.要不就不写template -->
        <div ref="main" style="width: 100%; height: 100%"></div>
        <template #footer>退货率<span class="bro">5.91%</span></template>
      </CommonCard>
    </el-card>
  </div>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue"
export default {
  name: "todayUsers",
  components: {
    CommonCard,
  },
}
</script>
<script lang="ts" setup>
import * as echarts from "echarts"
import { ref, reactive, onMounted, computed, watch } from "vue"
import type { EChartsType } from "echarts"
import { useReportData } from "@/stores/reportData" // 引入小菠萝获取数据

import useFormat from "@/hooks/useFormat"
// 对格式化数据的函数进行解构
const { numberFormat, moneyFormat } = useFormat()
// 这个页面完成后,发现第一控制台警告,显示说期望得到一个string,但是是number,这是公共组件插槽中定义props的type类型推断的,先不管
// 第二,发现页面中的数据与预期出入,预期要一个英文类型的数据,就是某位开始,每隔3个数字加一个逗号,我们可以在hook中定义一个函数,来对数据进行处理

// 创建pinia实例
const reportDataStore = useReportData()
const main = ref()
let myChart: EChartsType
// 还是和先前一样,需要在页面挂载完成后获取dom,不然就会获取不到报错,
// 先将对应的配置写好,进行加载,等到onMounted执行时,调用这个函数渲染图表

// 使用计算属性来存储即将要渲染的数据
const orderUser = computed(() => reportDataStore.reportData.orderUser)
const returnRate = computed(() => reportDataStore.reportData.returnRate)
const orderUserTrend = computed(() => reportDataStore.reportData.orderUserTrend)
const orderUserTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis)

const getOption = () => {
  return {
    xAxis: {
      //   boundaryGap: false, // 两侧不留空白
      type: "category",
      // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Sun", "Sun", "Sun", "Sun"],
      data: orderUserTrendAxis.value,
    },
    yAxis: {
      show: false,
      type: "value",
    },
    series: [
      {
        // data: orderUserTrendAxis.value
        data: orderUserTrend.value,
        type: "bar",
      },
    ],
    grid: {
      left: 0,
      right: 0,
    },
    tooltip: {
      trigger: "axis",
    },
  }
}

onMounted(() => {
  // var chartDom = document.getElementById('main');

  myChart = echarts.init(main.value)
  // 当监视了myChart.setOption后,需要将这个挂载的设置删除掉,不然会和侦听的属性冲突
  // myChart && myChart.setOption(getOption())

  //   dom0级事件方法
  // 当浏览器宽度发生变化的时候，图表也要发生变化
  window.addEventListener("resize", () => {
    myChart && myChart.resize()
  })
})
watch(orderUser, () => {
  myChart.setOption(getOption())
})
</script>

<style></style>
